<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">司机账号注册界面</view>
		<form class="cl">
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="text" name="acc" placeholder="请输入账号" v-model="acc" />
			</view>
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="password" name="pwd" placeholder="请输入密码" v-model="pwd" />
			</view>
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="number" name="phone" placeholder="请输入手机号" v-model="phone" />
			</view>
			<!-- 上传身份证 -->
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="text" name="idCard" placeholder="请输入身份证号" v-model="idCard" />
			</view>
			<button class="upload-btn" @click="uploadIdCard">上传身份证照片</button>
			
			<!-- 上传驾驶证 -->
			<view class="t-a">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<view class="line"></view>
				<input type="text" name="driverLicense" placeholder="请输入驾驶证号" v-model="driverLicense" />
			</view>
			<button class="upload-btn" @click="uploadDriverLicense">上传驾驶证照片</button>
			
			<button class="login-btn" @tap="login()">注 册</button>
		</form>
		<view class="t-f"><text>————— 其他方式 —————</text></view>
		<view class="t-e cl">
			<text class="t-acc" @click="goPhonePage">已有账号，去登录</text>
		</view>
		<view class="t-e cl">
			<text class="t-acc" @click="goReg">手机登录</text>
		</view>
	</view>
</template>

<script>
	import { register,uploadImg,uploadDriverImg } from '@/request/api.js'
	export default {
		data() {
			return {
				title: '滴滴出行', //填写logo或者app名称，也可以用：欢迎回来，看您需求
				acc: '', //账号
				pwd: '', //密码
				phone: '', //手机号
				code: '', //验证码
				isGettingCode: false,
				codeBtnText: '获取验证码',
				countdown: 60,
				idCard: '', // 身份证号
				address: '', // 地址
				birthDate: '', // 出生日期
				name: '', // 姓名
				ethnicity: '', // 民族
				gender: '', // 性别
				idCardImage: '', // 身份证照片路径

				driverLicenseImage: '' ,// 驾驶证照片路径
				driverName: '', // 驾驶证姓名
				driverLicenseAddress: '', // 驾驶证地址
				driverLicenseIssueDate: '', // 驾驶证发证日期
				driverLicense: '', // 驾驶证号
				driverLicenseValidity: '', // 驾驶证有效期
			}
		},
		onLoad() {},
		methods: {
			// 上传身份证照片
			uploadIdCard() {
				uni.chooseImage({
					count: 1,
					success: (chooseRes) => {
						// 获取临时文件路径
						const tempFilePath = chooseRes.tempFilePaths[0];
						this.idCardImage = tempFilePath;
						
						// 需要将文件路径转换为File对象（小程序/UniApp环境）
						uni.uploadFile({
							url: 'http://localhost:8000/upload-service/recognition/uploadIdNum', // 你的后端接口地址
							filePath: tempFilePath,
							name: 'file', // 必须与后端@RequestParam("file")一致
							success: (uploadRes) => {
								try {
									const res = JSON.parse(uploadRes.data);
									console.log('上传成功', res);
									if (res.code == 1) {
										uni.showToast({ title: '身份证识别成功', icon: 'none' });
										// 这里可以处理识别结果 res.data
										if (res.data) {
											const { name, idNumber, address, birthDate, gender, ethnicity } = res.data;
											this.name = name;
											this.idCard = idNumber;	
											this.address = address;
											this.birthDate = birthDate;
											this.gender = gender;
											this.ethnicity = ethnicity;
											console.log('识别结果', { name, idNumber, address, birthDate, gender, ethnicity });
										}
									} else {
										uni.showToast({ title: res.msg || '识别失败', icon: 'none' });
									}
								} catch (e) {
									console.error('解析响应失败', e);
									uni.showToast({ title: '处理识别结果失败', icon: 'none' });
								}
							},
							fail: (err) => {
								console.error('上传失败', err);
								uni.showToast({ title: '上传身份证照片失败', icon: 'none' });
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败', err);
						uni.showToast({ title: '选择身份证照片失败', icon: 'none' });
					}
				});
			},
			// 上传驾驶证照片
			uploadDriverLicense() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.driverLicenseImage = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'http://localhost:8000/upload-service/recognition/uploadDrivingLicenseImg', // 你的后端接口地址
							filePath: res.tempFilePaths[0],
							name: 'file', // 必须与后端@RequestParam("file")一致
							success: (uploadRes) => {
								try {
									const res = JSON.parse(uploadRes.data);
									console.log('上传成功', res);
									if (res.code == 1) {
										uni.showToast({ title: '驾驶证识别成功', icon: 'none' });
										// 这里可以处理识别结果 res.data
										if (res.data) {
											const { name, licenseNumber, address, birthDate, validPeriod } = res.data;
											this.driverName = name;
											this.driverLicense = licenseNumber;
											this.driverLicenseAddress = address;
											this.driverLicenseIssueDate = birthDate;
											this.driverLicenseValidity = validPeriod;
											console.log('识别结果', { name, licenseNumber, address, birthDate, validPeriod });
											
										}	
									}	
								}	
								catch (e) {
									console.error('解析响应失败', e);
									uni.showToast({ title: '处理识别结果失败', icon: 'none' });	
								}
							},
							fail: (err) => {
								console.error('上传失败', err);
								uni.showToast({ title: '上传驾驶证照片失败', icon: 'none' });		
							}
						})
					},
					fail: (err) => {
						console.error('上传驾驶证照片失败', err);
						uni.showToast({ title: '驾驶证照片上传失败', icon: 'none' });
					}
				});
			},
			//当前注册按钮操作
			login() {
				var that = this;
				if (!that.acc) {
					uni.showToast({ title: '请输入账号', icon: 'none' });
					return;
				}
				if (!that.pwd) {
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}
				if (!that.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({ title: '请输入正确手机号', icon: 'none' });
					return;
				}
				if (!that.idCard) {
					uni.showToast({ title: '请输入身份证号', icon: 'none' });
					return;
				}
				if (!that.driverLicense) {
					uni.showToast({ title: '请输入驾驶证号', icon: 'none' });
					return;
				}
				if (!that.idCardImage) {
					uni.showToast({ title: '请上传身份证照片', icon: 'none' });
					return;
				}
				if (!that.driverLicenseImage) {
					uni.showToast({ title: '请上传驾驶证照片', icon: 'none' });
					return;
				}
				if (that.name != that.driverName) {
					uni.showToast({ title: '身份证与驾驶证人员不一致', icon: 'none' });
					return;
				}

				//注册
				console.log(that.acc,that.name,that.pwd,that.phone,that.idCard,that.driverLicense,"注册")
				const data = {
					driverAcc: that.acc,
					name: that.name,
					password: that.pwd,
					phone: that.phone,	
					idCard: that.idCard,
					driverLicenseNumber: that.driverLicense	
				}
				register(data).then(res => {
					if (res.code == 1) {
						uni.showToast({ title: '注册成功！', icon: 'none' });	
						
						uni.navigateTo({
							url: '/pages/accLogin/accLogin' // 替换为你的目标页面路径	
						})
					}	
					else{
						// 添加默认值 '注册失败'
        				uni.showToast({ title: res.msg || '注册失败', icon: 'none' });
					}
				})
			},
			goPhonePage(){
				uni.navigateTo({
					url: '/pages/accLogin/accLogin' // 替换为你的目标页面路径
				});
			},
			goReg(){
				uni.navigateTo({
					url: '/pages/index/index' // 替换为你的目标页面路径
				});
			}
		}
	};
</script>

<style>
	.img-a {
		position: absolute;
		width: 100%;
		top: -280rpx;
		right: 0;
	}
	.img-b {
		position: absolute;
		width: 50%;
		bottom: -100rpx;
		left: -200rpx;
	}
	
	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		padding: 0 0 100rpx 0;
	}
	
	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
		margin-bottom: 30rpx;
	}
	
	.login-btn {
		margin-top: 40rpx !important;
	}
	
	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 30rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
		width: 100%;
		box-sizing: border-box;
	}
	
	.t-login .t-a {
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		z-index: 2;
	}
	
	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
		z-index: 1;
	}
	
	.upload-btn {
		width: 100%;
		margin-top: -20rpx;
		margin-bottom: 20rpx !important;
		background: #4CAF50 !important;
	}
	
	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 0 0 30rpx 0;
		font-weight: bold;
		position: relative;
	}
	
	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 60rpx 0;
		position: relative;
	}
	
	.t-login .t-f {
		text-align: center;
		margin: 60rpx 0 0 0;
		color: #666;
		position: relative;
	}
	
	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}
	
	.t-login .uni-input-placeholder {
		color: #999;
	}
	
	.cl {
		zoom: 1;
	}
	
	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
	
	.t-acc {
		color: #1B6EF3;
		display: block;
		margin: 20rpx 0;
		font-size: 28rpx;
	}
	
	.t-e {
		text-align: center;
	}
</style>